<script>
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
//引入路由/search/hot/detail
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { showToast } from "vant";
export default {
  components: {},
  setup() {
    const showTop = ref(false);
    const searchValue = ref("");
    const searchText = ref("");
    const hotShow = ref(true);
    const singleShow = ref(false);
    const oData = reactive({
      SongTitle: [],
      singleArr: [],
    });
    const store = useStore();
    //创建route
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    /* 热搜歌单 */
    const HotGet = () => {
      proxy.$http.get(proxy.$api + "/search/hot").then((response) => {
        console.log(response);
        if (response.data.code == 200) {
          oData.SongTitle.push(...response.data.result.hots);
        }
      });
    };
    /* 搜索 */
    const SearchGet = (name) => {
      proxy.$http
        .get(proxy.$api + "/search?keywords=" + name)
        .then(async (response) => {
          if (response.data.code == 200) {
            hotShow.value = false;
            await oData.singleArr.push(...response.data.result.songs);
          }
          singleShow.value = true;
        });
    };
    const onSpanClick = (name) => {
      SearchGet(name);
    };
    const SearchClick = () => {
      if (searchText.value.length != 0) {
        SearchGet(searchText.value);
      } else {
        showToast("请输入歌名");
      }
    };
    const onSeachClick = () => {
      showTop.value = true;
      hotShow.value = true;
      singleShow.value = false;
      oData.singleArr = [];
    };
    /* 点击播放 */
    const onSingleClick = (id) => {
      store.commit("songID", {
        songid: id,
        songnum: 1,
      });
      showTop.value = false;
    };
    /* 返回 */
    const onReturnClick = ()=>{
        showTop.value = false;
    };
    onMounted(() => {
      HotGet();
    });
    return {
      searchText,
      searchValue,
      showTop,
      oData,
      hotShow,
      singleShow,
      onSpanClick,
      onSingleClick,
      onSeachClick,
      SearchClick,
      onReturnClick
    };
  },
};
</script>
<template>
  <div class="search">
    <van-search
      v-model="searchValue"
      shape="round"
      placeholder="请输入搜索关键词"
      input-align="center"
      @click="onSeachClick()"
    />
  </div>
  <van-popup v-model:show="showTop" position="top" :style="{ height: '100%' }">
    <van-sticky class="van-hairline--bottom">
      <div class="sticky-top">
        <van-icon name="arrow-left" size="1.5rem" @click="onReturnClick()"/>
        <div class="searchdiv">
          <van-search
            v-model="searchText"
            shape="round"
            placeholder="请输入搜索关键词"
            input-align="center"
          />
        </div>
        <van-icon name="search" size="1.5rem" @click="SearchClick()" />
      </div>
    </van-sticky>
    <!-- 猜你喜欢 -->
    <div class="hot" v-if="hotShow">
      <div class="hottit">猜你喜欢</div>
      <span
        class="van-haptics-feedback"
        v-for="(item, index) in oData.SongTitle"
        :key="index"
        @click="onSpanClick(item.first)"
      >
        {{ item.first }}
      </span>
    </div>
    <!-- 单曲 -->
    <div class="single" v-if="singleShow">
      <div class="singletit">单曲</div>
      <div
        class="singleli van-hairline--bottom"
        v-for="(item, index) in oData.singleArr"
        :key="index"
        :data-id="item.id"
        @click="onSingleClick(item.id)"
      >
        <div class="name">
          {{ item.name }}
        </div>
        <div class="nametest">
          <span class="span3">原唱</span>
          <span class="span1">
            {{ item.artists[0].name }}
          </span>
          -
          <span class="span2">
            {{ item.name }}
          </span>
        </div>
        <div class="line">
          {{ item.alias[0] }}
        </div>
        <div class="right">
          <span class="iconfont">&#xe8c4;</span>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style lang="less" scoped>
.search {
  flex: 1;
}
.sticky-top {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5px 10px;
  background: #fff;
  .searchdiv {
    flex: 1;
  }
}
.hot {
  .hottit {
    font-size: 12px;
    font-weight: 600;
    padding: 5px;
  }
  span {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 2px 5px;
    font-size: 12px;
    color: #333;
    margin: 5px;
  }
}
.single {
  .singletit {
    font-size: 12px;
    font-weight: 600;
    padding: 5px;
  }
  .singleli {
    padding: 5px;
    line-height: 20px;
    position: relative;
    .name {
      font-weight: 600;
      font-size: 14px;
      color: #2fb1ec;
      transform: scale(0.95);
    }
    .line {
      font-size: 12px;
      color: #969696;
      transform: scale(0.95);
    }
    .nametest {
      font-size: 12px;
      color: #969696;
      transform: scale(0.95);
      span {
        transform: scale(0.95);
        display: inline-block;
      }
      .span2 {
        color: #2fb1ec;
      }
      .span3 {
        background: rgb(233, 47, 34);
        color: #fff;
        border-radius: 20px;
        padding: 2px 5px;
        transform: scale(0.96);
        line-height: 15px;
      }
    }
    .right {
      position: absolute;
      top: 0;
      right: 10px;
      bottom: 0;
      margin: auto;
      height: fit-content;
    }
  }
}
</style>